<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Hello Vue.js</title>
		<script src="https://unpkg.com/vue@next"></script>
    </head>
    <body>
        <!--View-->
        <div id="app">
            <a v-bind:[onlyhref1]="url">新浪网</a>
			<a :href="url">新浪网</a>
			<a v-on:[eventname]="doSomething">do</a>
			<!--
			动态参数表达式有一些语法约束，因为某些字符，
			如空格和引号，放在 HTML attribute 名里是无效的
			<a v-bind:['foo' + eventname]="value">test</a>
			-->
			<a v-bind:['foo'+eventname]="value">test</a>
        </div>
    
        
        <script>
		    //避免使用大写字符来命名键名，
			//因为浏览器会把 attribute 名全部强制转为小写：
		    //attributeName  只能是小写单词
            var vm = Vue.createApp({
                  data(){
                    return{
                      onlyhref1: "href",
                      url: "http://www.sina.com.cn/",
					  eventname: "click"
                    }
                  },
				  methods:{
					  doSomething(){
						  console.log("doSomething");
					  }
				  }
            }).mount('#app');
        </script>
    </body>
</html>
